<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="icon" type="image/jpg"  href="./images/icon.jpg"/>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
<div class="login-container">
    <div class="login-description">
        <div class="welcome">
            Welcome me！
        </div>
        <div class="detail">
            校园管理系统
        </div>
    </div>
    <div class="login-from">
        <div class="login-title">账号登录</div>
        <form class="layui-form" action="${pageContext.request.contextPath}/toLogin" lay-filter="example" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">账号ID</label>
                <div class="layui-input-block">
                    <input type="text" name="id" lay-verify="id" autocomplete="off" placeholder="请输账号ID"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-block">
                    <input type="password" name="password" placeholder="请输入密码" lay-verify="pass" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">账号类型</label>
                <div class="layui-input-block">
                    <select name="role" lay-filter="required">
                        <option value="0">普通用户</option>
                        <option value="1">管理员</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF" lay-filter="switchTest">
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <!-- <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button> -->
                    <!-- <button type="button" class="layui-btn layui-btn-normal"
                        id="LAY-component-form-getval">取值</button> -->
                    <button type="reset" class="layui-btn layui-btn-normal">重置</button>
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        background-image: url('../../images/bg1.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-size: cover;
        background-position: center center;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        /* 此条属性必须设置否则可能无效 */
        background-attachment: fixed;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
        background-color: #CCCCCC;
    }
</style>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form
            , layer = layui.layer;



        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ],
            id: [
                /^[\S0-9]+$/
                , '账户ID必需是数字,且不能出现空格'
            ]
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            // layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
            //     offset: '6px'
            // });
            // console.log(data);
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        // form.on('submit(demo1)', function (data) {
        //     layer.alert(JSON.stringify(data.field), {
        //         title: '最终的提交信息'
        //     })
        //     //改成true就可跳转
        //     return true;
        // });

        //表单赋值
        // layui.$('#LAY-component-form-setval').on('click', function () {
        //     form.val('example', {
        //         "username": "贤心" // "name": "value"
        //         , "password": "123456"
        //         , "interest": 1
        //         , "like[write]": true //复选框选中状态
        //         , "close": true //开关状态
        //         , "sex": "女"
        //         , "desc": "我爱 layui"
        //     });
        // });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });
    function getRootPath_web() {
        //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
        var curWwwPath = window.document.location.href;
        //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        //获取主机地址，如： http://localhost:8083
        var localhostPaht = curWwwPath.substring(0, pos);
        //获取带"/"的项目名，如：/uimcardprj
        var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
        return (localhostPaht + projectName);
    }
</script>

